import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
import path from 'path';
// 引入svg插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

const pathResolve = (pathStr) => {
  return path.resolve(__dirname, pathStr);
};
export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      resolvers: [ElementPlusResolver()],
      // 解决 `import { ref , reactive ..... } from 'vue'` 大量引入的问题
      imports: ['vue', 'vue-router']
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    }),
    createSvgIconsPlugin({
      // 指定需要缓存的svg图标文件夹，即需要识别的svg都应该放在这个文件夹下
      // iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
      // 或
      iconDirs: [pathResolve('./src/assets/svgs')],
      // 指定symbolId格式（这里的配置与6.2步骤中的引入svg组件的name配置项写法有关）
      symbolId: 'icon-[dir]-[name]'
    })
  ],
  base: '/', //打包后，访问的路径环境变量
  resolve: {
    alias: {
      '@': pathResolve('./src')
    }
  },
  server: {
    hmr: true
  }
});
